<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>名创优品官方商城-购物车</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			
		</div>
		
		
		<div class="y-whiteBox" >
			<div class="y-main">
				<!-- 空购物车 -->
				<div class="x-emptyCart" style="height: auto;display: none;">
					<div class="x-rowBar">
						<p>购物车空空的</p>
						<div class="btnBar">
							<button class="x-redBtn">去购买</button>
						</div>
					</div>
				</div>
				
				<!-- 购物车 -->
				<div id="list"  >
					<div class="x-row tipBar" >
						<div class="x-checkbox"></div>
						<p class="selectAll">全选</p>
						<p class="singleprice">单价</p>
						<p class="quantity">数量</p>
						<p class="calculatle">小计</p>
					</div>
					<ul class="cartList">
						<li>
							<div class="x-checkbox"></div>
							<a href="#"><img src="img/product/人气推荐/1.png" ></a>
							<div class="goods_detail">
								<a href="#">清新花香系列香体喷雾</a>
							</div>
							<p id="singleprice">￥10</p>
							<div class="count">
								<span class="reduce"></span>
								<input type="" name="" id="number" value="1"/>
								<span class="plus"></span>
							</div>
							<span id ="subtotal" class="allprice">¥10</span>
							<div class="del">×</div>
						</li>
						
					</ul>
					<div class="shanchu">
						<div id="del">
							<div class="x-checkbox"></div>
							<p class="onSelected">已选: <span class="number">1</span></p>
							<a href="#"class="delAll">批量删除</a>
							<a href="#"class="clear">清除无效商品</a>
							<button id="checkout">下单结算</button>
						</div>
						
				
						<div class="detail">
							<p class="x-gray">
							商品合计：<span class="allprice" id="cartTotalPrice">¥10</span>
							订单优惠：<span id="cartDiscount">¥0</span>
							<!-- <img src="img/explanation3.png" > -->
							<span style="color: #000000;">应付总额：</span>
							</p>
							<h1 id="x-red" class="allprice">¥10</h1>
							<a href="#" id="mianyou">本单享受免邮</a>
						</div>
					</div>
				</div>
				
				
				
			</div>
			<!-- 轮播图 -->
			<div class="fav">
				<h1>猜你喜欢</h1>
				<div id="cart-pic">
					<div class="swiper-wrapper">
					<ul style="margin-left: 0;">
						<li>
							<a href=""><img src="img/cart/1.jpg">
								<div class="x-Ptag">3色可选</div>
							</a>
							<a href="" class="title">便携简约经典保温杯300ml</a>
							<span class="">¥29.9</span>
						</li>
						<li>
							<a href=""><img src="img/cart/2.jpg"></a>
							<a href="" class="title">节能环保小夜灯300ml</a>
							<span class="">¥19.9</span>
						</li>
						<li>
							<a href=""><img src="img/cart/3.png">
								<div class="x-Ptag">4色可选</div>
							</a>
							<a href="" class="title">完美自动眉笔</a>
							<span class="">¥9.9</span>
						</li>
						<li>
							<a href=""><img src="img/cart/4.jpg">
		
							</a>
							<a href="" class="title">三支装护龈极简瓷感牙刷 </a>
							<span class="">¥10</span>
						</li>
						<!-- 溢出隐藏 -->
						<li>
							<a href=""><img src="img/cart/1.jpg">
								<div class="x-Ptag">3色可选</div>
							</a>
							<a href="" class="title">便携简约经典保温杯300ml</a>
							<span class="">¥29.9</span>
						</li>
						<li>
							<a href=""><img src="img/cart/2.jpg"></a>
							<a href="" class="title">节能环保小夜灯300ml</a>
							<span class="">¥19.9</span>
						</li>
						<li>
							<a href=""><img src="img/cart/3.png">
								<div class="x-Ptag">4色可选</div>
							</a>
							<a href="" class="title">完美自动眉笔</a>
							<span class="">¥9.9</span>
						</li>
						<li>
							<a href=""><img src="img/cart/4.jpg">
								
							</a>
							<a href="" class="title">三支装护龈极简瓷感牙刷 </a>
							<span class="">¥10</span>
						</li>
					</ul>
		
				</div>
				<div class="button-next"></div>
				<div class="button-prev"></div>
				</div>
				
			</div>
		</div>
		
		
		
		<!-- 底部 -->
			<div class="tail1"></div>
		<!-- 尾部 -->
			<div class="tail2"></div>

	</body>
</html>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/cart.js"></script>
<script type="text/javascript">
	// 引入头部
	$(".header").load("header.html", function() {});
	// 引入尾部
	$(".tail1").load("tail1.html", function() {});
	$(".tail2").load("tail2.html", function() {});
</script>